<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>

    <script>
        function Arrow(x, y, color, angle) {
            this.x = x || 0;
            this.y = y || 0;
            this.color = color || "#FF0099";
            this.angle = angle || 0;
        }
        Arrow.prototype = {
            stroke: function (cxt) {
                cxt.save();
                cxt.translate(this.x, this.y);
                cxt.strokeStyle = this.color;
                cxt.beginPath();
                cxt.moveTo(-20, -10);
                cxt.lineTo(0, -10);
                cxt.lineTo(0, -20);
                cxt.lineTo(20, 0);
                cxt.lineTo(0, 20);
                cxt.lineTo(0, 10);
                cxt.lineTo(-20, 10);
                cxt.closePath();;
                cxt.stroke();
                cxt.restore();
            },
            fill: function (cxt, cnv) {

                cxt.save();
                //cnv.clearReact(cnv.width,cnv.height)
                cxt.translate(this.x, this.y);
                cxt.rotate(this.angle);
                cxt.beginPath();//切记，不要遗留这个
                cxt.moveTo(-20, -10);
                cxt.lineTo(0, -10);
                cxt.lineTo(0, -20);
                cxt.lineTo(20, 0);
                cxt.lineTo(0, 20);
                cxt.lineTo(0, 10);
                cxt.lineTo(-20, 10);
                cxt.closePath();
                cxt.fill();
                cxt.restore();

            }
        }
        window.tools = {};
        window.tools.getMouse = function (element) {
            var mouse = { x: 0, y: 0 };
            element.addEventListener("mousemove", function (e) {
                var x, y;
                var e = e || window.event;
                if (e.pageX || e.pageY) {
                    x = e.pageX;
                    y = e.pageY;
                } else {
                    //IE8以下，以及混子模式下的chrome和safari
                    x = e.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
                    y = e.clientY + document.body.scrollTop || document.documentElement.scrollTop;
                }
                //将当前的坐标减去canvas元素的偏移量，则为x、y为是鼠标在canvas中的相对坐标
                x -= element.offsetLeft;
                y -= element.offsetTop;
                mouse.x = x;
                mouse.y = y;

            });
            return mouse;
        }
        function $$(id) {
            return document.getElementById(id);
        }

        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext('2d');
            //实例化一个箭筒，中心坐标为画布的中心坐标
            var arrow = new Arrow(cnv.width / 2, cnv.height / 2);

            var mouse = window.tools.getMouse(cnv);;
            function drawFrame() {
                window.requestAnimationFrame(drawFrame, cnv);
                cxt.clearRect(0, 0, 800, 800);
                //获取鼠标坐标
                var dx = mouse.x - cnv.width / 2;
                var dy = mouse.y - cnv.height / 2;
                //获取鼠标和箭头的夹角
                //拿到的是弧度
                arrow.angle = Math.atan2(dy, dx);
                //弧度转角度后
                console.log("arrow.angle", arrow.angle * 180 / Math.PI)
                arrow.fill(cxt);
            };
            drawFrame();

        }
    </script>
</body>

</html>